<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Admin-Page</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/image.css">
    <link rel="stylesheet" href="/static/css/admin.css">
    <script type="text/javascript" src="/static/js/admin.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>

</head>
<style>
    .name_style {
        height: 30px;
        margin: 5px;
        font-size: 16px;
    }

    .research_input {
        width: 200px;
        display: none;
    }

    .research_input input {
        float: left;
        width: 150px;
        height: 40px;
        margin-top: 2.5px;
    }
</style>
<script>
    function showRearch() {
        let resInp = document.getElementById("res_input");
        let res = document.getElementById("res")
        resInp.style['display'] = "block"
        res.style["display"] = "none"
    }

    function showImagePage() {
        let imageShowDiv = document.getElementById("imageShowDiv");
        imageShowDiv.style['display'] = 'block';
    }

    function closeImagePage() {
        let imageShowDiv = document.getElementById("imageShowDiv");
        imageShowDiv.style['display'] = 'none';
    }

    function selectImg() {
        let checked = document.getElementsByName("checked");
        let number = 0;
        let current = "";
        for (let i = 0; i < checked.length; i++) {
            if (checked[i].checked) {
                current = checked[i];
                number++;
            }
        }
        if (number > 1) {
            for (let i = 0; i < checked.length; i++) {
                checked[i].checked = false
            }
            alert("只可以选择一个数据");
        } else {
            let imageSelected = document.getElementById("image" + current.id);
            let img1 = document.getElementById("img-head");
            img1.src = imageSelected.src;
            document.getElementById("img").value = current.id;
            document.getElementById("imageShowDiv").style['display'] = "none";
        }

    }


</script>

<body>

<div class="header">
    <div class="topBar" onmouseleave="closePersonContr(); closeSearch()">
        <a onmouseover="sider()" style="cursor: pointer">
            <img src="../static/img/icon/file.svg" width="50px" height="64px"
                 style="float: left;background-color: #ff6a00">
        </a>
        <div class="mainMenu">
            <a href="/" class="menuList">
                首页
            </a>
            <a href="/baseKnowledge" class="menuList">软工概述</a>
            <a href="/" class="menuList">子案例</a>
            <a href="/" class="menuList">完整案例</a>
        </div>

        <div class="research" id="res">
            <div class="showResearch"></div>
            <div class="researchIcon" onmouseover="showRearch()">搜索</div>
        </div>
        <div class="research research_input" id="res_input">
            <input type="text">
            <a href="">
                <div style="float: right; width: 32px;height:32px;margin-top:8px;margin-right: 5px;
        background-image: url('/static/img/icon/search.svg');background-repeat: no-repeat"
                ></div>
            </a>
        </div>

        <div class="loginInfo">
            {{if .user}}
                <div id="user" style="margin-right: 50px" onmouseenter="showPersonContr()">{{.user.Name}}</div>
            {{else}}
                <a href="/login">登录</a>
                <a href="/register" class="register">立即注册</a>
            {{end}}
            <div id="personShow">
                {{if .user}}
                    {{if ne .user.Level "1"}}
                        <a href="/admin" style="width:80px;">管理员</a>
                    {{end}}
                    <a href="/exit" style="width: 80px; ">个人信息</a>
                    <a href="/exit" style="width: 80px;">退出</a>
                {{end}}
            </div>


        </div>
    </div>
</div>
<div id="topDiv">
    <div id="t_left">
        <div class="userInf">
            个人信息
            <div id="userInfShow">
                <div style="width: 100px;height: 100px; margin: auto">
                    <img src="/{{.headImg.Path}}"
                         style="width: 100px;height: 100px;border-radius: 5px;">
                </div>
                <span>Name：{{.user.Name}}</span> <br>
                <span>Role：{{.user.Role}}</span> <br>

            </div>
        </div>
        <div class="l1">
            <span class="l1_list" onclick="knowledgeDivShow('s_k')">
                 <span style="width: 50px;height: 41px;display: inline-block">
                    <img src="../static/img/icon/knowledge.svg" style="margin-left: 12.5px; vertical-align: middle">
                </span>
                <span style="width: 108px; height: 40px;display: inline-block">软工知识</span>

            </span>
            <span class="l1_list" onclick="knowledgeDivShow('s_c')">
                <span style="width: 50px;height: 41px;display: inline-block">
                    <img src="../static/img/icon/subCase.svg" style="margin-left: 12.5px; vertical-align: middle">
                </span>
                <span style="width: 108px; height: 40px;display: inline-block">子案例</span>
            </span>
            <span class="l1_list" onclick="knowledgeDivShow('c_c')">
                <span style="width: 50px;height: 41px;display: inline-block">
                    <img src="../static/img/icon/completeCase.svg" style="margin-left: 12.5px; vertical-align: middle">
                </span>
                <span style="width: 108px; height: 40px;display: inline-block">完整案例</span>
            </span>
            <span class="l1_list" onclick="knowledgeDivShow('p_i')">
                <span style="width: 50px;height: 41px;display: inline-block">
                    <img src="../static/img/icon/changeInf.svg" style="margin-left: 12.5px; vertical-align: middle">
                </span>
                <span style="width: 108px; height: 40px;display: inline-block">信息修改</span>
            </span>
        </div>
        <div class="l2">
            <span style="width: 158px;height: 41px;line-height: 41px">
                <span style="width: 25px;height: 41px;display: inline-block">
                    <img src="../static/img/icon/tool.svg" style="margin-left: 12.5px; vertical-align: middle">
                </span>
                <span style="width: 80px; height: 40px;display: inline-block">工具应用</span>
                <span style="width: 40px; height: 40px;display: inline-block">订阅</span>
            </span>
        </div>
    </div>
    <div id="t_right">
        <div style="position: relative; left: 1387px;cursor: pointer;" onclick="sider()">
            <img src="../static/img/icon/fork.svg" width="20" style="vertical-align: middle">
        </div>
        <div id="s_k" class="right_content" style="display: block">
            <div class="s_k_left">
                <div onclick="showSource('uploadFile')" class="uploadFileShow">
                    上传文件
                </div>
                <div onclick="showSource('showFile')" class="uploadFileShow">
                    文件列表
                </div>
                <div onclick="showSource('showImage')" class="uploadFileShow">
                    图片列表
                </div>
                <div onclick="showSource('showVideo')" class="uploadFileShow">
                    视屏列表
                </div>
                <div class="uploadFileShow">
                    <a href="/admin/book" style="text-decoration: none; color: black">Book Edit</a>
                </div>
            </div>
            <div class="s_k_right">
                <div id="uploadFile" style="display: none;width: 340px;height: 150px;margin-top: 50px;margin-left: 230px" >
                    <div class="fileSelect-model">
                        <!-- 中心上传按钮@click='batchUpload' -->
                        <form method="POST" enctype="multipart/form-data" action="/upFile">
                            <input name="myfile" type="file" id="batchUpload" multiple="multiple">
                            <input type="submit" value="确定" class="uploadSubmit">
                        </form>
                        <div onclick="centerUploadBox()" class="centerUploadBox">
                            <div class="uploadBut">
                                <div class="centerUpload"></div>
                                <div class="uploadChar">上传</div>
                            </div>
                        </div>
                        <div class="fileList">
                        </div>
                    </div>
                </div>
                <div id="showFile"
                     style="height: 500px;width: 900px;display: none;background-color: #bcd2c0;float: left;">
                    <table border="1px">
                        <tr>
                            <th align="center" valign="middle">Id</th>
                            <th align="center" valign="middle">Uid</th>
                            <th align="center" valign="middle">Title</th>
                            <th align="center" valign="middle">Content</th>
                            <th align="center" valign="middle">Deploy</th>
                            <th align="center" valign="middle">Operation</th>
                        </tr>
                        {{range $article :=.as}}
                            <tr>
                                <td align="center" valign="middle">{{$article.Id}}</td>
                                <td align="center" valign="middle">{{$article.Uid}}</td>
                                <td align="center" valign="middle">{{$article.Title}}</td>
                                <td align="center" valign="middle">{{$article.Content}}</td>
                                <td align="center" valign="middle"><a
                                            href="/admin/deployArticle?articleId={{$article.Id}}">{{$article.Deploy}}</a>
                                </td>
                                <td align="center" valign="middle">
                                    <button name="编辑"><a href="">Edit</a></button>
                                    <button name="删除"
                                            onclick="confirmDelete('/admin/deleteArticle?article={{$article.Id}}')">
                                        Delete
                                    </button>
                                    <button name="查看"><a href="/admin/articleShow?article={{$article.Id}}">Check</a>
                                    </button>
                                </td>
                            </tr>
                        {{end}}

                    </table>
                </div>
                <div id="showImage"
                     style="height: 500px;width: 900px;display: none;float: left;">
                    <!--相册-->
                    <div id="albums">
                        {{range $image :=.images}}
                            <a href="/admin/showImage?path={{$image.Path}}">
                                <div class="smallpicshow">
                                    <div class="smallpicshow_zoom">
                                        <img class="smallpic" src="/{{$image.Path}}">
                                    </div>
                                </div>
                            </a>
                        {{end}}
                    </div>
                </div>
                <div id="showVideo" style="height: 500px;width: 900px;display: block;float: left;">
                    <div style="width: 810px;height: 400px;overflow: auto;margin-top: 50px;margin-left: 50px; ">
                        {{range $video := .videos}}
                        <div style="width:200px;height: 150px;float: left;margin-left:30px;margin-top: 10px;margin-bottom: 10px "
                             onmouseover="showVideoName({{$video.Id}})" onmouseleave="closeVideoName({{$video.Id}})">
                            <div style="width: 200px;height: 100px;background-color: #85b995;">

                                    <video src="/{{$video.Path}}" width="200px">
                                    </video>
                            </div>
                            <br>
                            <div style="width: 200px;height: 50px">
                                <button>重命名</button>
                                <button onclick="confirmDelete('/admin/deleteVideo?video={{$video.Id}}')">删除</button>
                            </div>
                            <div id="videoName{{$video.Id}}" style="width:200px;height:40px;background-color: black; position: relative; z-index: 99;opacity: 0.6; top: -97px;display: none">
                                {{$video.Name}}
                                <a href="/admin/playVideo?videoPath={{$video.Path}}" style="color: white;text-decoration: none">
                                <div>播放</div>
                                </a>
                            </div>
                        </div>

                        {{end}}
                    </div>
                </div>
            </div>

        </div>
        <div id="s_c" class="right_content" style="display: none"></div>
        <div id="c_c" class="right_content"  style="display: none"></div>
        <div id="p_i" class="right_content" style="display: none">
            <div id="showFile"
                 style="height: 500px;width: 800px;background: azure;float: left; margin-left: 300px">
                <div style="width: 400px;height: 400px;margin: auto;text-align: center;border: #666666 solid 1px">
                    <h3>个人信息修改</h3>
                    <br>
                    <img id="img-head" src="{{.headImg.Path}}" height="100px" width="100px">
                    <button onclick="showImagePage()">更改</button>
                    <form action="/admin/updateInformation" method="post">
                        <label for="name">姓名：<input id="name" class="name_style" type="text" name="name"
                                                    value="{{.user.Name}}"></label> <br>
                        <label for="pwd">密码：<input id="pwd" class="name_style" type="text" name="pwd"
                                                   value="{{.user.Pwd}}"></label> <br>
                        <label for="role">角色：<input id="role" class="name_style" type="text" name="role"
                                                    value="{{.user.Role}}"></label> <br>
                        <label for="img">头像：<input id="img" class="name_style" type="text" name="imgId"
                                                   value="{{.user.ImgId}}"></label> <br>
                        <button type="submit">提交</button>
                    </form>
                </div>
                <div id="imageShowDiv"
                     style=" width:150px;height: 300px;position: relative;top:-400px;left: 605px;border: #666666 solid 1px;display: none">
                    <div style="width: 150px;height:300px;overflow: auto">
                        {{range $image := .images}}
                            <label for="{{$image.Id}}">
                                <img id="image{{$image.Id}}" class="imgSel" src="/{{$image.Path}}" height="100"
                                     width="100"
                                     name="">
                            </label>
                            <input type="checkbox" id="{{$image.Id}}" name="checked">
                        {{end}}
                    </div>
                    <button id="b_select1" onclick="selectImg()" style="position:relative;top: 5px;">确定</button>
                    <button id="b_cancel" onclick="closeImagePage()" style="position:relative;left: 50px;top: 5px">取消
                    </button>
                </div>

            </div>
        </div>
    </div>
    <div id="container">

    </div>
</div>
</body>
</html>